<template>
    <div class="main-content">
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem href="#">数据</BreadcrumbItem>
                <BreadcrumbItem href="#">广告数据</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card>
            <Row>
                <Col span="24">
                <span>广告计划名称：</span>
                <Input v-model="search.name" size="large" placeholder="请填写广告计划名称" style="width:200px;"></Input>
                <span style="margin-left:20px;">客户公司名称：</span>
                <Input v-model="search.company" size="large" placeholder="请填写公司名称" style="width:200px;"></Input>
                <Button style="margin-left:20px;" type="primary" size="large" @click="goSearch">查询</Button>
                </Col>
            </Row>
        </Card>
        <Card style="margin-top:20px;">
            <div class="layout-content clearfix">
                <div class="layout-content-main">
                    <div class="header">
                        <Row type="flex" justify="center">
                            <Col span="24">
                            <Button type="primary" size="large" @click="excelExport">导出数据</Button>
                            <div class="filter-wrapper" style="float:right;">
                                <Button size="large" :class="{'btn-active':curTime==='today'}" @click="changeTime('today')">今天</Button>
                                <Button size="large" :class="{'btn-active':curTime==='yesterday'}" @click="changeTime('yesterday')">昨天</Button>
                                <Button size="large" :class="{'btn-active':curTime==='7day'}" @click="changeTime('7day')">最近7天</Button>
                                <Button size="large" :class="{'btn-active':curTime==='30day'}" @click="changeTime('30day')">最近30天</Button>
                                <DatePicker type="daterange" :clearable="false" placement="bottom-end" placeholder="" style="width: 230px" size="large" @on-change="changeDate" v-model="search.time"></DatePicker>
                            </div>
                            </Col>
                        </Row>
                    </div>
                    <Table stripe :columns="columns" :data="data"></Table>
                    <div class="page-wrapper">
                        <Page :current="page.current" :total="page.total" :page-size="page.size" show-total @on-change="changeCur" @on-page-size-change="changeSize"></Page>
                    </div>
                </div>
            </div>
        </Card>
    </div>
</template>
<script>
import Config from '../../api/config';

export default {
  data() {
    return {
      search: {
        name: '',
        company: '',
        time: ''
      },
      curTime: 'today',
      data: [],
      page: {
        current: 1,
        total: 100,
        size: 50
      },
      columns: [
        {
          title: '广告计划名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '客户公司名称',
          key: 'org_name',
          align: 'center'
        },
        {
          title: '时间',
          key: 'time',
          align: 'center',
          render: (h, params) => {
            let time = '';
            let mess = this.search.time.toLocaleString();
            let day = mess.split(' ');
            let startDay = day[0];
            let endDay = day[1].split(',')[1];
            if (time === '') {
              time = startDay + ' - ' + endDay;
              return h('span', time);
            }
          }
        },
        {
          title: '曝光量（次）',
          key: 'count_view',
          align: 'center',
          sortable: 'true'
        },
        {
          title: '点击量（次）',
          key: 'count_click',
          align: 'center',
          sortable: 'true'
        },
        {
          title: '点击率',
          key: 'click_percent',
          align: 'center'
        },
        {
          title: '点击价格',
          key: 'click_price',
          align: 'center'
        },
        {
          title: '总消耗',
          key: 'consume',
          align: 'center',
          sortable: 'true'
        }
      ]
    };
  },
  mounted() {
    this.search.time = this.generateTime('today');
    this._loadData();
  },
  methods: {
    _loadData() {
      let vm = this;
      let params = {
        type: 'get',
        url: 'data/ad',
        params: {
          page: vm.page.current,
          size: vm.page.size,
          name: vm.search.name,
          time: vm.search.time,
          company: vm.search.company
        },
        sCallback(data) {
          vm.page.current = Number(data.data.current_page);
          vm.page.total = Number(data.data.total);
          vm.page.size = Number(data.data.per_page);
          vm.data = data.data.data;
        },
        eCallbakc(e) {
          console.log(e);
        }
      };
      this.http.request(params);
    },
    goSearch() {
      let time = this.search.time;
      if (time.length === 2) {
        let startTime =
          time[0].getFullYear() +
          '-' +
          (time[0].getMonth() + 1) +
          '-' +
          '-' +
          time[0].getDate();

        let endTime =
          time[1].getFullYear() +
          '-' +
          (time[1].getMonth() + 1) +
          '-' +
          time[1].getDate();
        this.search.time = startTime + ' - ' + endTime;
        this._loadData();
      } else {
        this.search.time = this.search.time;
        this._loadData();
      }
    },
    generateTime(index) {
      let date = new Date();
      let today = new Date();
      let yesterday = new Date();
      let day7 = new Date();
      let day30 = new Date();
      let result = null;

      today.setTime(date.getTime());
      yesterday.setTime(date.getTime() - 24 * 60 * 60 * 1000);
      day7.setTime(date.getTime() - 6 * 24 * 60 * 60 * 1000);
      day30.setTime(date.getTime() - 29 * 24 * 60 * 60 * 1000);

      switch (index) {
        case 'today':
          result =
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate() +
            ' - ' +
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate();
          break;
        case 'yesterday':
          result =
            yesterday.getFullYear() +
            '-' +
            (yesterday.getMonth() + 1) +
            '-' +
            yesterday.getDate() +
            ' - ' +
            yesterday.getFullYear() +
            '-' +
            (yesterday.getMonth() + 1) +
            '-' +
            yesterday.getDate();
          break;
        case '7day':
          result =
            day7.getFullYear() +
            '-' +
            (day7.getMonth() + 1) +
            '-' +
            day7.getDate() +
            ' - ' +
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate();
          break;
        case '30day':
          result =
            day30.getFullYear() +
            '-' +
            (day30.getMonth() + 1) +
            '-' +
            day30.getDate() +
            ' - ' +
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate();
          break;
        default:
          result =
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate() +
            ' - ' +
            today.getFullYear() +
            '-' +
            (today.getMonth() + 1) +
            '-' +
            today.getDate();
          break;
      }
      return result;
    },
    changeDate(index) {
      this.curTime = 'date';
      this.search.time = index[0] + ' - ' + index[1];
      this._loadData();
    },
    changeTime(index) {
      this.curTime = index;
      this.search.time = this.generateTime(index);
      this._loadData();
    },
    changeCur(current) {
      this.page.current = current;
      this._loadData();
    },
    changeSize(pageSize) {
      this.page.size = pageSize;
      this._loadData();
    },
    excelExport() {
      let vm = this;
      let time = this.search.time;
      let startTime =
        time[0].getFullYear() +
        '-' +
        (time[0].getMonth() + 1) +
        '-' +
        time[0].getDate();

      let endTime =
        time[1].getFullYear() +
        '-' +
        (time[1].getMonth() + 1) +
        '-' +
        time[1].getDate();

      vm.search.time = startTime + ' - ' + endTime;

      window.open(
        Config.restUrl +
          'exportexcel/adData?token=' +
          vm.$store.state.token +
          '&time=' +
          vm.search.time +
          '&name=' +
          vm.search.name +
          '&company=' +
          vm.search.company
      );
    }
  }
};
</script>
<style lang="stylus">
.btn-active
    color #fff
    background-color #2d8cf0
    border-color #2d8cf0
</style>